/**
 * JustGage - animated gauges using RaphaelJS
 * Check http://www.justgage.com for official releases
 * Licensed under MIT.
 * @author Bojan Djuricic (@Toorshia)
 **/

JustGage = function (config) {

    var obj = this;

    // Helps in case developer wants to debug it. unobtrusive
    if (config === null || config === undefined) {
        console.log('* justgage: Make sure to pass options to the constructor!');
        return false;
    }

    var node;

    if (config.id !== null && config.id !== undefined) {
        node = document.getElementById(config.id);
        if (!node) {
            console.log('* justgage: No element with id : %s found', config.id);
            return false;
        }
    } else if (config.parentNode !== null && config.parentNode !== undefined) {
        node = config.parentNode;
    } else {
        console.log('* justgage: Make sure to pass the existing element id or parentNode to the constructor.');
        return false;
    }

    var dataset = node.dataset ? node.dataset : {};

    // check for defaults
    var defaults = (config.defaults !== null && config.defaults !== undefined) ? config.defaults : false;
    if (defaults !== false) {
        config = extend({}, config, defaults);
        delete config.defaults;
    }

    // configurable parameters
    obj.config = {
        // id : string
        // this is container element id
        id: config.id,

        // value : float
        // value gauge is showing
        value: kvLookup('value', config, dataset, 0, 'float'),

        // defaults : bool
        // defaults parameter to use
        defaults: kvLookup('defaults', config, dataset, 0, false),

        // parentNode : node object
        // this is container element
        parentNode: kvLookup('parentNode', config, dataset, null),

        // width : int
        // gauge width
        width: kvLookup('width', config, dataset, null),

        // height : int
        // gauge height
        height: kvLookup('height', config, dataset, null),

        // title : string
        // gauge title
        title: kvLookup('title', config, dataset, ""),

        // titleFontColor : string
        // color of gauge title
        titleFontColor: kvLookup('titleFontColor', config, dataset, "#999999"),

        // titleFontFamily : string
        // color of gauge title
        titleFontFamily: kvLookup('titleFontFamily', config, dataset, "sans-serif"),

        // titlePosition : string
        // 'above' or 'below'
        titlePosition: kvLookup('titlePosition', config, dataset, "above"),

        // valueFontColor : string
        // color of label showing current value
        valueFontColor: kvLookup('valueFontColor', config, dataset, "#010101"),

        // valueFontFamily : string
        // color of label showing current value
        valueFontFamily: kvLookup('valueFontFamily', config, dataset, "Arial"),

        // symbol : string
        // special symbol to show next to value
        symbol: kvLookup('symbol', config, dataset, ''),

        // min : float
        // min value
        min: kvLookup('min', config, dataset, 0, 'float'),

        // max : float
        // max value
        max: kvLookup('max', config, dataset, 100, 'float'),

        // reverse : bool
        // reverse min and max
        reverse: kvLookup('reverse', config, dataset, false),

        // humanFriendlyDecimal : int
        // number of decimal places for our human friendly number to contain
        humanFriendlyDecimal: kvLookup('humanFriendlyDecimal', config, dataset, 0),


        // textRenderer: func
        // function applied before rendering text
        textRenderer: kvLookup('textRenderer', config, dataset, null),

        // gaugeWidthScale : float
        // width of the gauge element
        gaugeWidthScale: kvLookup('gaugeWidthScale', config, dataset, 1.0),

        // gaugeColor : string
        // background color of gauge element
        gaugeColor: kvLookup('gaugeColor', config, dataset, "#edebeb"),

        // label : string
        // text to show below value
        label: kvLookup('label', config, dataset, ''),

        // labelFontColor : string
        // color of label showing label under value
        labelFontColor: kvLookup('labelFontColor', config, dataset, "#b3b3b3"),

        // shadowOpacity : int
        // 0 ~ 1
        shadowOpacity: kvLookup('shadowOpacity', config, dataset, 0.2),

        // shadowSize: int
        // inner shadow size
        shadowSize: kvLookup('shadowSize', config, dataset, 5),

        // shadowVerticalOffset : int
        // how much shadow is offset from top
        shadowVerticalOffset: kvLookup('shadowVerticalOffset', config, dataset, 3),

        // levelColors : string[]
        // colors of indicator, from lower to upper, in RGB format
        levelColors: kvLookup('levelColors', config, dataset, ["#a9d70b", "#f9c802", "#ff0000"], 'array', ','),

        // startAnimationTime : int
        // length of initial animation
        startAnimationTime: kvLookup('startAnimationTime', config, dataset, 700),

        // startAnimationType : string
        // type of initial animation (linear, >, <,  <>, bounce)
        startAnimationType: kvLookup('startAnimationType', config, dataset, '>'),

        // refreshAnimationTime : int
        // length of refresh animation
        refreshAnimationTime: kvLookup('refreshAnimationTime', config, dataset, 700),

        // refreshAnimationType : string
        // type of refresh animation (linear, >, <,  <>, bounce)
        refreshAnimationType: kvLookup('refreshAnimationType', config, dataset, '>'),

        // donutStartAngle : int
        // angle to start from when in donut mode
        donutStartAngle: kvLookup('donutStartAngle', config, dataset, 90),

        // valueMinFontSize : int
        // absolute minimum font size for the value
        valueMinFontSize: kvLookup('valueMinFontSize', config, dataset, 16),

        // titleMinFontSize
        // absolute minimum font size for the title
        titleMinFontSize: kvLookup('titleMinFontSize', config, dataset, 10),

        // labelMinFontSize
        // absolute minimum font size for the label
        labelMinFontSize: kvLookup('labelMinFontSize', config, dataset, 10),

        // minLabelMinFontSize
        // absolute minimum font size for the minimum label
        minLabelMinFontSize: kvLookup('minLabelMinFontSize', config, dataset, 10),

        // maxLabelMinFontSize
        // absolute minimum font size for the maximum label
        maxLabelMinFontSize: kvLookup('maxLabelMinFontSize', config, dataset, 10),

        // hideValue : bool
        // hide value text
        hideValue: kvLookup('hideValue', config, dataset, false),

        // hideMinMax : bool
        // hide min and max values
        hideMinMax: kvLookup('hideMinMax', config, dataset, false),

        // hideInnerShadow : bool
        // hide inner shadow
        hideInnerShadow: kvLookup('hideInnerShadow', config, dataset, false),

        // humanFriendly : bool
        // convert large numbers for min, max, value to human friendly (e.g. 1234567 -> 1.23M)
        humanFriendly: kvLookup('humanFriendly', config, dataset, false),

        // noGradient : bool
        // whether to use gradual color change for value, or sector-based
        noGradient: kvLookup('noGradient', config, dataset, false),

        // donut : bool
        // show full donut gauge
        donut: kvLookup('donut', config, dataset, false),

        // relativeGaugeSize : bool
        // whether gauge size should follow changes in container element size
        relativeGaugeSize: kvLookup('relativeGaugeSize', config, dataset, false),

        // counter : bool
        // animate level number change
        counter: kvLookup('counter', config, dataset, false),

        // decimals : int
        // number of digits after floating point
        decimals: kvLookup('decimals', config, dataset, 0),

        // customSectors : [] of objects
        // number of digits after floating point
        customSectors: kvLookup('customSectors', config, dataset, []),

        // formatNumber: boolean
        // formats numbers with commas where appropriate
        formatNumber: kvLookup('formatNumber', config, dataset, false),

        // pointer : bool
        // show value pointer
        pointer: kvLookup('pointer', config, dataset, false),

        // pointerOptions : object
        // define pointer look
        pointerOptions: kvLookup('pointerOptions', config, dataset, [])
    };

    // variables
    var
        canvasW,
        canvasH,
        widgetW,
        widgetH,
        aspect,
        dx,
        dy,
        titleFontSize,
        titleX,
        titleY,
        valueFontSize,
        valueX,
        valueY,
        labelFontSize,
        labelX,
        labelY,
        minFontSize,
        minX,
        minY,
        maxFontSize,
        maxX,
        maxY;

    // overflow values
    if (obj.config.value > obj.config.max) obj.config.value = obj.config.max;
    if (obj.config.value < obj.config.min) obj.config.value = obj.config.min;
    obj.originalValue = kvLookup('value', config, dataset, -1, 'float');

    // create canvas
    if (obj.config.id !== null && (document.getElementById(obj.config.id)) !== null) {
        obj.canvas = Raphael(obj.config.id, "100%", "100%");
    } else if (obj.config.parentNode !== null) {
        obj.canvas = Raphael(obj.config.parentNode, "100%", "100%");
    }

    if (obj.config.relativeGaugeSize === true) {
        obj.canvas.setViewBox(0, 0, 200, 150, true);
    }

    // canvas dimensions
    if (obj.config.relativeGaugeSize === true) {
        canvasW = 200;
        canvasH = 150;
    } else if (obj.config.width !== null && obj.config.height !== null) {
        canvasW = obj.config.width;
        canvasH = obj.config.height;
    } else if (obj.config.parentNode !== null) {
        obj.canvas.setViewBox(0, 0, 200, 150, true);
        canvasW = 200;
        canvasH = 150;
    } else {
        canvasW = getStyle(document.getElementById(obj.config.id), "width").slice(0, -2) * 1;
        canvasH = getStyle(document.getElementById(obj.config.id), "height").slice(0, -2) * 1;
    }

    // widget dimensions
    if (obj.config.donut === true) {

        // DONUT *******************************

        // width more than height
        if (canvasW > canvasH) {
            widgetH = canvasH;
            widgetW = widgetH;
            // width less than height
        } else if (canvasW < canvasH) {
            widgetW = canvasW;
            widgetH = widgetW;
            // if height don't fit, rescale both
            if (widgetH > canvasH) {
                aspect = widgetH / canvasH;
                widgetH = widgetH / aspect;
                widgetW = widgetH / aspect;
            }
            // equal
        } else {
            widgetW = canvasW;
            widgetH = widgetW;
        }

        // delta
        dx = (canvasW - widgetW) / 2;
        dy = (canvasH - widgetH) / 2;

        // title
        titleFontSize = ((widgetH / 8) > 10) ? (widgetH / 10) : 10;
        titleX = dx + widgetW / 2;
        titleY = dy + widgetH / 11;

        // value
        valueFontSize = ((widgetH / 6.4) > 16) ? (widgetH / 5.4) : 18;
        valueX = dx + widgetW / 2;
        if (obj.config.label !== '') {
            valueY = dy + widgetH / 1.85;
        } else {
            valueY = dy + widgetH / 1.7;
        }

        // label
        labelFontSize = ((widgetH / 16) > 10) ? (widgetH / 16) : 10;
        labelX = dx + widgetW / 2;
        labelY = valueY + labelFontSize;

        // min
        minFontSize = ((widgetH / 16) > 10) ? (widgetH / 16) : 10;
        minX = dx + (widgetW / 10) + (widgetW / 6.666666666666667 * obj.config.gaugeWidthScale) / 2;
        minY = labelY;

        // max
        maxFontSize = ((widgetH / 16) > 10) ? (widgetH / 16) : 10;
        maxX = dx + widgetW - (widgetW / 10) - (widgetW / 6.666666666666667 * obj.config.gaugeWidthScale) / 2;
        maxY = labelY;

    } else {
        // HALF *******************************

        // width more than height
        if (canvasW > canvasH) {
            widgetH = canvasH;
            widgetW = widgetH * 1.25;
            //if width doesn't fit, rescale both
            if (widgetW > canvasW) {
                aspect = widgetW / canvasW;
                widgetW = widgetW / aspect;
                widgetH = widgetH / aspect;
            }
            // width less than height
        } else if (canvasW < canvasH) {
            widgetW = canvasW;
            widgetH = widgetW / 1.25;
            // if height don't fit, rescale both
            if (widgetH > canvasH) {
                aspect = widgetH / canvasH;
                widgetH = widgetH / aspect;
                widgetW = widgetH / aspect;
            }
            // equal
        } else {
            widgetW = canvasW;
            widgetH = widgetW * 0.75;
        }

        // delta
        dx = (canvasW - widgetW) / 2;
        dy = (canvasH - widgetH) / 2;
        if (obj.config.titlePosition === 'below') {
            // shift whole thing down
            dy -= (widgetH / 6.4);
        }

        // title
        titleFontSize = ((widgetH / 8) > obj.config.titleMinFontSize) ? (widgetH / 10) : obj.config.titleMinFontSize;
        titleX = dx + widgetW / 2;
        titleY = dy + (obj.config.titlePosition === 'below' ? (widgetH * 1.07) : (widgetH / 6.4));

        // value
        valueFontSize = ((widgetH / 6.5) > obj.config.valueMinFontSize) ? (widgetH / 6.5) : obj.config.valueMinFontSize;
        valueX = dx + widgetW / 2;
        valueY = dy + widgetH / 1.275;

        // label
        labelFontSize = ((widgetH / 16) > obj.config.labelMinFontSize) ? (widgetH / 16) : obj.config.labelMinFontSize;
        labelX = dx + widgetW / 2;
        labelY = valueY + valueFontSize / 2 + 5;

        // min
        minFontSize = ((widgetH / 16) > obj.config.minLabelMinFontSize) ? (widgetH / 16) : obj.config.minLabelMinFontSize;
        minX = dx + (widgetW / 10) + (widgetW / 6.666666666666667 * obj.config.gaugeWidthScale) / 2;
        minY = labelY;

        // max
        maxFontSize = ((widgetH / 16) > obj.config.maxLabelMinFontSize) ? (widgetH / 16) : obj.config.maxLabelMinFontSize;
        maxX = dx + widgetW - (widgetW / 10) - (widgetW / 6.666666666666667 * obj.config.gaugeWidthScale) / 2;
        maxY = labelY;
    }

    // parameters
    obj.params = {
        canvasW: canvasW,
        canvasH: canvasH,
        widgetW: widgetW,
        widgetH: widgetH,
        dx: dx,
        dy: dy,
        titleFontSize: titleFontSize,
        titleX: titleX,
        titleY: titleY,
        valueFontSize: valueFontSize,
        valueX: valueX,
        valueY: valueY,
        labelFontSize: labelFontSize,
        labelX: labelX,
        labelY: labelY,
        minFontSize: minFontSize,
        minX: minX,
        minY: minY,
        maxFontSize: maxFontSize,
        maxX: maxX,
        maxY: maxY
    };

    // var clear
    canvasW, canvasH, widgetW, widgetH, aspect, dx, dy, titleFontSize, titleX, titleY, valueFontSize, valueX, valueY, labelFontSize, labelX, labelY, minFontSize, minX, minY, maxFontSize, maxX, maxY = null;

    // pki - custom attribute for generating gauge paths
    obj.canvas.customAttributes.pki = function (value, min, max, w, h, dx, dy, gws, donut, reverse) {

        var alpha, Ro, Ri, Cx, Cy, Xo, Yo, Xi, Yi, path;

        if (donut) {
            alpha = (1 - 2 * (value - min) / (max - min)) * Math.PI;
            Ro = w / 2 - w / 7;
            Ri = Ro - w / 6.666666666666667 * gws;

            Cx = w / 2 + dx;
            Cy = h / 1.95 + dy;

            Xo = w / 2 + dx + Ro * Math.cos(alpha);
            Yo = h - (h - Cy) - Ro * Math.sin(alpha);
            Xi = w / 2 + dx + Ri * Math.cos(alpha);
            Yi = h - (h - Cy) - Ri * Math.sin(alpha);

            path = "M" + (Cx - Ri) + "," + Cy + " ";
            path += "L" + (Cx - Ro) + "," + Cy + " ";
            if (value > ((max - min) / 2)) {
                path += "A" + Ro + "," + Ro + " 0 0 1 " + (Cx + Ro) + "," + Cy + " ";
            }
            path += "A" + Ro + "," + Ro + " 0 0 1 " + Xo + "," + Yo + " ";
            path += "L" + Xi + "," + Yi + " ";
            if (value > ((max - min) / 2)) {
                path += "A" + Ri + "," + Ri + " 0 0 0 " + (Cx + Ri) + "," + Cy + " ";
            }
            path += "A" + Ri + "," + Ri + " 0 0 0 " + (Cx - Ri) + "," + Cy + " ";
            path += "Z ";

            return {
                path: path
            };

        } else {
            alpha = (1 - (value - min) / (max - min)) * Math.PI;
            Ro = w / 2 - w / 10;
            Ri = Ro - w / 6.666666666666667 * gws;

            Cx = w / 2 + dx;
            Cy = h / 1.25 + dy;

            Xo = w / 2 + dx + Ro * Math.cos(alpha);
            Yo = h - (h - Cy) - Ro * Math.sin(alpha);
            Xi = w / 2 + dx + Ri * Math.cos(alpha);
            Yi = h - (h - Cy) - Ri * Math.sin(alpha);

            path = "M" + (Cx - Ri) + "," + Cy + " ";
            path += "L" + (Cx - Ro) + "," + Cy + " ";
            path += "A" + Ro + "," + Ro + " 0 0 1 " + Xo + "," + Yo + " ";
            path += "L" + Xi + "," + Yi + " ";
            path += "A" + Ri + "," + Ri + " 0 0 0 " + (Cx - Ri) + "," + Cy + " ";
            path += "Z ";

            return {
                path: path
            };
        }

        // var clear
        alpha, Ro, Ri, Cx, Cy, Xo, Yo, Xi, Yi, path = null;
    };

    // ndl - custom attribute for generating needle path
    obj.canvas.customAttributes.ndl = function (value, min, max, w, h, dx, dy, gws, donut) {

        var dlt = w * 3.5 / 100;
        var dlb = w / 15;
        var dw = w / 100;

        if (obj.config.pointerOptions.toplength != null && obj.config.pointerOptions.toplength != undefined) dlt = obj.config.pointerOptions.toplength;
        if (obj.config.pointerOptions.bottomlength != null && obj.config.pointerOptions.bottomlength != undefined) dlb = obj.config.pointerOptions.bottomlength;
        if (obj.config.pointerOptions.bottomwidth != null && obj.config.pointerOptions.bottomwidth != undefined) dw = obj.config.pointerOptions.bottomwidth;

        var alpha, Ro, Ri, Cx, Cy, Xo, Yo, Xi, Yi, Xc, Yc, Xz, Yz, Xa, Ya, Xb, Yb, path;

        if (donut) {

            alpha = (1 - 2 * (value - min) / (max - min)) * Math.PI;
            Ro = w / 2 - w / 7;
            Ri = Ro - w / 6.666666666666667 * gws;

            Cx = w / 2 + dx;
            Cy = h / 1.95 + dy;

            Xo = w / 2 + dx + Ro * Math.cos(alpha);
            Yo = h - (h - Cy) - Ro * Math.sin(alpha);
            Xi = w / 2 + dx + Ri * Math.cos(alpha);
            Yi = h - (h - Cy) - Ri * Math.sin(alpha);

            Xc = Xo + dlt * Math.cos(alpha);
            Yc = Yo - dlt * Math.sin(alpha);
            Xz = Xi - dlb * Math.cos(alpha);
            Yz = Yi + dlb * Math.sin(alpha);

            Xa = Xz + dw * Math.sin(alpha);
            Ya = Yz + dw * Math.cos(alpha);
            Xb = Xz - dw * Math.sin(alpha);
            Yb = Yz - dw * Math.cos(alpha);

            path = 'M' + Xa + ',' + Ya + ' ';
            path += 'L' + Xb + ',' + Yb + ' ';
            path += 'L' + Xc + ',' + Yc + ' ';
            path += 'Z ';

            return {
                path: path
            };

        } else {
            alpha = (1 - (value - min) / (max - min)) * Math.PI;
            Ro = w / 2 - w / 10;
            Ri = Ro - w / 6.666666666666667 * gws;

            Cx = w / 2 + dx;
            Cy = h / 1.25 + dy;

            Xo = w / 2 + dx + Ro * Math.cos(alpha);
            Yo = h - (h - Cy) - Ro * Math.sin(alpha);
            Xi = w / 2 + dx + Ri * Math.cos(alpha);
            Yi = h - (h - Cy) - Ri * Math.sin(alpha);

            Xc = Xo + dlt * Math.cos(alpha);
            Yc = Yo - dlt * Math.sin(alpha);
            Xz = Xi - dlb * Math.cos(alpha);
            Yz = Yi + dlb * Math.sin(alpha);

            Xa = Xz + dw * Math.sin(alpha);
            Ya = Yz + dw * Math.cos(alpha);
            Xb = Xz - dw * Math.sin(alpha);
            Yb = Yz - dw * Math.cos(alpha);

            path = 'M' + Xa + ',' + Ya + ' ';
            path += 'L' + Xb + ',' + Yb + ' ';
            path += 'L' + Xc + ',' + Yc + ' ';
            path += 'Z ';

            return {
                path: path
            };
        }

        // var clear
        alpha, Ro, Ri, Cx, Cy, Xo, Yo, Xi, Yi, Xc, Yc, Xz, Yz, Xa, Ya, Xb, Yb, path = null;
    };

    // gauge
    obj.gauge = obj.canvas.path().attr({
        "stroke": "none",
        "fill": obj.config.gaugeColor,
        pki: [
            obj.config.max,
            obj.config.min,
            obj.config.max,
            obj.params.widgetW,
            obj.params.widgetH,
            obj.params.dx,
            obj.params.dy,
            obj.config.gaugeWidthScale,
            obj.config.donut,
            obj.config.reverse
        ]
    });

    // level
    obj.level = obj.canvas.path().attr({
        "stroke": "none",
        "fill": getColor(obj.config.value, (obj.config.value - obj.config.min) / (obj.config.max - obj.config.min), obj.config.levelColors, obj.config.noGradient, obj.config.customSectors),
        pki: [
            obj.config.min,
            obj.config.min,
            obj.config.max,
            obj.params.widgetW,
            obj.params.widgetH,
            obj.params.dx,
            obj.params.dy,
            obj.config.gaugeWidthScale,
            obj.config.donut,
            obj.config.reverse
        ]
    });
    if (obj.config.donut) {
        obj.level.transform("r" + obj.config.donutStartAngle + ", " + (obj.params.widgetW / 2 + obj.params.dx) + ", " + (obj.params.widgetH / 1.95 + obj.params.dy));
    }

    if (obj.config.pointer) {
        // needle
        obj.needle = obj.canvas.path().attr({
            "stroke": (obj.config.pointerOptions.stroke !== null && obj.config.pointerOptions.stroke !== undefined) ? obj.config.pointerOptions.stroke : "none",
            "stroke-width": (obj.config.pointerOptions.stroke_width !== null && obj.config.pointerOptions.stroke_width !== undefined) ? obj.config.pointerOptions.stroke_width : 0,
            "stroke-linecap": (obj.config.pointerOptions.stroke_linecap !== null && obj.config.pointerOptions.stroke_linecap !== undefined) ? obj.config.pointerOptions.stroke_linecap : "square",
            "fill": (obj.config.pointerOptions.color !== null && obj.config.pointerOptions.color !== undefined) ? obj.config.pointerOptions.color : "#000000",
            ndl: [
                obj.config.min,
                obj.config.min,
                obj.config.max,
                obj.params.widgetW,
                obj.params.widgetH,
                obj.params.dx,
                obj.params.dy,
                obj.config.gaugeWidthScale,
                obj.config.donut
            ]
        });

        if (obj.config.donut) {
            obj.needle.transform("r" + obj.config.donutStartAngle + ", " + (obj.params.widgetW / 2 + obj.params.dx) + ", " + (obj.params.widgetH / 1.95 + obj.params.dy));
        }

    }

    // title
    obj.txtTitle = obj.canvas.text(obj.params.titleX, obj.params.titleY, obj.config.title);
    obj.txtTitle.attr({
        "font-size": obj.params.titleFontSize,
        "font-weight": "bold",
        "font-family": obj.config.titleFontFamily,
        "fill": obj.config.titleFontColor,
        "fill-opacity": "1"
    });
    setDy(obj.txtTitle, obj.params.titleFontSize, obj.params.titleY);

    // value
    obj.txtValue = obj.canvas.text(obj.params.valueX, obj.params.valueY, 0);
    obj.txtValue.attr({
        "font-size": obj.params.valueFontSize,
        "font-weight": "bold",
        "font-family": obj.config.valueFontFamily,
        "fill": obj.config.valueFontColor,
        "fill-opacity": "0"
    });
    setDy(obj.txtValue, obj.params.valueFontSize, obj.params.valueY);

    // label
    obj.txtLabel = obj.canvas.text(obj.params.labelX, obj.params.labelY, obj.config.label);
    obj.txtLabel.attr({
        "font-size": obj.params.labelFontSize,
        "font-weight": "normal",
        "font-family": "Arial",
        "fill": obj.config.labelFontColor,
        "fill-opacity": "0"
    });
    setDy(obj.txtLabel, obj.params.labelFontSize, obj.params.labelY);

    // min
    var min = obj.config.min;
    if (obj.config.reverse) {
        min = obj.config.max;
    }

    obj.txtMinimum = min;
    if (obj.config.humanFriendly) {
        obj.txtMinimum = humanFriendlyNumber(min, obj.config.humanFriendlyDecimal);
    } else if (obj.config.formatNumber) {
        obj.txtMinimum = formatNumber(min);
    }
    obj.txtMin = obj.canvas.text(obj.params.minX, obj.params.minY, obj.txtMinimum);
    obj.txtMin.attr({
        "font-size": obj.params.minFontSize,
        "font-weight": "normal",
        "font-family": "Arial",
        "fill": obj.config.labelFontColor,
        "fill-opacity": (obj.config.hideMinMax || obj.config.donut) ? "0" : "1"
    });
    setDy(obj.txtMin, obj.params.minFontSize, obj.params.minY);

    // max
    var max = obj.config.max;
    if (obj.config.reverse) {
        max = obj.config.min;
    }
    obj.txtMaximum = max;
    if (obj.config.humanFriendly) {
        obj.txtMaximum = humanFriendlyNumber(max, obj.config.humanFriendlyDecimal);
    } else if (obj.config.formatNumber) {
        obj.txtMaximum = formatNumber(max);
    }
    obj.txtMax = obj.canvas.text(obj.params.maxX, obj.params.maxY, obj.txtMaximum);
    obj.txtMax.attr({
        "font-size": obj.params.maxFontSize,
        "font-weight": "normal",
        "font-family": "Arial",
        "fill": obj.config.labelFontColor,
        "fill-opacity": (obj.config.hideMinMax || obj.config.donut) ? "0" : "1"
    });
    setDy(obj.txtMax, obj.params.maxFontSize, obj.params.maxY);

    var defs = obj.canvas.canvas.childNodes[1];
    var svg = "http://www.w3.org/2000/svg";

    if (ie !== 'undefined' && ie < 9) {
        // VML mode - no SVG & SVG filter support
    } else if (ie !== 'undefined') {
        onCreateElementNsReady(function () {
            obj.generateShadow(svg, defs);
        });
    } else {
        obj.generateShadow(svg, defs);
    }

    // var clear
    defs, svg = null;

    // set value to display
    if (obj.config.textRenderer) {
        obj.originalValue = obj.config.textRenderer(obj.originalValue);
    } else if (obj.config.humanFriendly) {
        obj.originalValue = humanFriendlyNumber(obj.originalValue, obj.config.humanFriendlyDecimal) + obj.config.symbol;
    } else if (obj.config.formatNumber) {
        obj.originalValue = formatNumber(obj.originalValue) + obj.config.symbol;
    } else {
        obj.originalValue = (obj.originalValue * 1).toFixed(obj.config.decimals) + obj.config.symbol;
    }

    if (obj.config.counter === true) {
        //on each animation frame
        eve.on("raphael.anim.frame." + (obj.level.id), function () {
            var currentValue = obj.level.attr("pki")[0];
            if (obj.config.reverse) {
                currentValue = (obj.config.max * 1) + (obj.config.min * 1) - (obj.level.attr("pki")[0] * 1);
            }
            if (obj.config.textRenderer) {
                obj.txtValue.attr("text", obj.config.textRenderer(Math.floor(currentValue)));
            } else if (obj.config.humanFriendly) {
                obj.txtValue.attr("text", humanFriendlyNumber(Math.floor(currentValue), obj.config.humanFriendlyDecimal) + obj.config.symbol);
            } else if (obj.config.formatNumber) {
                obj.txtValue.attr("text", formatNumber(Math.floor(currentValue)) + obj.config.symbol);
            } else {
                obj.txtValue.attr("text", (currentValue * 1).toFixed(obj.config.decimals) + obj.config.symbol);
            }
            setDy(obj.txtValue, obj.params.valueFontSize, obj.params.valueY);
            currentValue = null;
        });
        //on animation end
        eve.on("raphael.anim.finish." + (obj.level.id), function () {
            obj.txtValue.attr({
                "text": obj.originalValue
            });
            setDy(obj.txtValue, obj.params.valueFontSize, obj.params.valueY);
        });
    } else {
        //on animation start
        eve.on("raphael.anim.start." + (obj.level.id), function () {
            obj.txtValue.attr({
                "text": obj.originalValue
            });
            setDy(obj.txtValue, obj.params.valueFontSize, obj.params.valueY);
        });
    }

    // animate gauge level, value & label
    var rvl = obj.config.value;
    if (obj.config.reverse) {
        rvl = (obj.config.max * 1) + (obj.config.min * 1) - (obj.config.value * 1);
    }
    obj.level.animate({
        pki: [
            rvl,
            obj.config.min,
            obj.config.max,
            obj.params.widgetW,
            obj.params.widgetH,
            obj.params.dx,
            obj.params.dy,
            obj.config.gaugeWidthScale,
            obj.config.donut,
            obj.config.reverse
        ]
    }, obj.config.startAnimationTime, obj.config.startAnimationType);

    if (obj.config.pointer) {
        obj.needle.animate({
            ndl: [
                rvl,
                obj.config.min,
                obj.config.max,
                obj.params.widgetW,
                obj.params.widgetH,
                obj.params.dx,
                obj.params.dy,
                obj.config.gaugeWidthScale,
                obj.config.donut
            ]
        }, obj.config.startAnimationTime, obj.config.startAnimationType);
    }

    obj.txtValue.animate({
        "fill-opacity": (obj.config.hideValue) ? "0" : "1"
    }, obj.config.startAnimationTime, obj.config.startAnimationType);
    obj.txtLabel.animate({
        "fill-opacity": "1"
    }, obj.config.startAnimationTime, obj.config.startAnimationType);
};

/** Refresh gauge level */
JustGage.prototype.refresh = function (val, max) {

    var obj = this;
    var displayVal, color, max = max || null;

    // set new max
    if (max !== null) {
        obj.config.max = max;
        // TODO: update customSectors

        obj.txtMaximum = obj.config.max;
        if (obj.config.humanFriendly) {
            obj.txtMaximum = humanFriendlyNumber(obj.config.max, obj.config.humanFriendlyDecimal);
        } else if (obj.config.formatNumber) {
            obj.txtMaximum = formatNumber(obj.config.max);
        }
        if (!obj.config.reverse) {
            obj.txtMax.attr({
                "text": obj.txtMaximum
            });
            setDy(obj.txtMax, obj.params.maxFontSize, obj.params.maxY);
        } else {
            obj.txtMin.attr({
                "text": obj.txtMaximum
            });
            setDy(obj.txtMin, obj.params.minFontSize, obj.params.minY);
        }
    }

    // overflow values
    displayVal = val;
    if ((val * 1) > (obj.config.max * 1)) {
        val = (obj.config.max * 1);
    }
    if ((val * 1) < (obj.config.min * 1)) {
        val = (obj.config.min * 1);
    }

    color = getColor(val, (val - obj.config.min) / (obj.config.max - obj.config.min), obj.config.levelColors, obj.config.noGradient, obj.config.customSectors);

    if (obj.config.textRenderer) {
        displayVal = obj.config.textRenderer(displayVal);
    } else if (obj.config.humanFriendly) {
        displayVal = humanFriendlyNumber(displayVal, obj.config.humanFriendlyDecimal) + obj.config.symbol;
    } else if (obj.config.formatNumber) {
        displayVal = formatNumber((displayVal * 1).toFixed(obj.config.decimals)) + obj.config.symbol;
    } else {
        displayVal = (displayVal * 1).toFixed(obj.config.decimals) + obj.config.symbol;
    }
    obj.originalValue = displayVal;
    obj.config.value = val * 1;

    if (!obj.config.counter) {
        obj.txtValue.attr({
            "text": displayVal
        });
        setDy(obj.txtValue, obj.params.valueFontSize, obj.params.valueY);
    }

    var rvl = obj.config.value;
    if (obj.config.reverse) {
        rvl = (obj.config.max * 1) + (obj.config.min * 1) - (obj.config.value * 1);
    }
    obj.level.animate({
        pki: [
            rvl,
            obj.config.min,
            obj.config.max,
            obj.params.widgetW,
            obj.params.widgetH,
            obj.params.dx,
            obj.params.dy,
            obj.config.gaugeWidthScale,
            obj.config.donut,
            obj.config.reverse
        ],
        "fill": color
    }, obj.config.refreshAnimationTime, obj.config.refreshAnimationType);

    if (obj.config.pointer) {
        obj.needle.animate({
            ndl: [
                rvl,
                obj.config.min,
                obj.config.max,
                obj.params.widgetW,
                obj.params.widgetH,
                obj.params.dx,
                obj.params.dy,
                obj.config.gaugeWidthScale,
                obj.config.donut
            ]
        }, obj.config.refreshAnimationTime, obj.config.refreshAnimationType);
    }

    // var clear
    obj, displayVal, color, max = null;
};

/** Generate shadow */
JustGage.prototype.generateShadow = function (svg, defs) {

    var obj = this;
    var sid = "inner-shadow-" + obj.config.id;
    var gaussFilter, feOffset, feGaussianBlur, feComposite1, feFlood, feComposite2, feComposite3;

    // FILTER
    gaussFilter = document.createElementNS(svg, "filter");
    gaussFilter.setAttribute("id", sid);
    defs.appendChild(gaussFilter);

    // offset
    feOffset = document.createElementNS(svg, "feOffset");
    feOffset.setAttribute("dx", 0);
    feOffset.setAttribute("dy", obj.config.shadowVerticalOffset);
    gaussFilter.appendChild(feOffset);

    // blur
    feGaussianBlur = document.createElementNS(svg, "feGaussianBlur");
    feGaussianBlur.setAttribute("result", "offset-blur");
    feGaussianBlur.setAttribute("stdDeviation", obj.config.shadowSize);
    gaussFilter.appendChild(feGaussianBlur);

    // composite 1
    feComposite1 = document.createElementNS(svg, "feComposite");
    feComposite1.setAttribute("operator", "out");
    feComposite1.setAttribute("in", "SourceGraphic");
    feComposite1.setAttribute("in2", "offset-blur");
    feComposite1.setAttribute("result", "inverse");
    gaussFilter.appendChild(feComposite1);

    // flood
    feFlood = document.createElementNS(svg, "feFlood");
    feFlood.setAttribute("flood-color", "black");
    feFlood.setAttribute("flood-opacity", obj.config.shadowOpacity);
    feFlood.setAttribute("result", "color");
    gaussFilter.appendChild(feFlood);

    // composite 2
    feComposite2 = document.createElementNS(svg, "feComposite");
    feComposite2.setAttribute("operator", "in");
    feComposite2.setAttribute("in", "color");
    feComposite2.setAttribute("in2", "inverse");
    feComposite2.setAttribute("result", "shadow");
    gaussFilter.appendChild(feComposite2);

    // composite 3
    feComposite3 = document.createElementNS(svg, "feComposite");
    feComposite3.setAttribute("operator", "over");
    feComposite3.setAttribute("in", "shadow");
    feComposite3.setAttribute("in2", "SourceGraphic");
    gaussFilter.appendChild(feComposite3);

    // set shadow
    if (!obj.config.hideInnerShadow) {
        obj.canvas.canvas.childNodes[2].setAttribute("filter", "url(#" + sid + ")");
        obj.canvas.canvas.childNodes[3].setAttribute("filter", "url(#" + sid + ")");
    }

    // var clear
    gaussFilter, feOffset, feGaussianBlur, feComposite1, feFlood, feComposite2, feComposite3 = null;
};

//
// tiny helper function to lookup value of a key from two hash tables
// if none found, return defaultvalue
//
// key: string
// tablea: object
// tableb: DOMStringMap|object
// defval: string|integer|float|null
// datatype: return datatype
// delimiter: delimiter to be used in conjunction with datatype formatting
//
function kvLookup(key, tablea, tableb, defval, datatype, delimiter) {
    var val = defval;
    var canConvert = false;
    if (!(key === null || key === undefined)) {
        if (tableb !== null && tableb !== undefined && typeof tableb === "object" && key in tableb) {
            val = tableb[key];
            canConvert = true;
        } else if (tablea !== null && tablea !== undefined && typeof tablea === "object" && key in tablea) {
            val = tablea[key];
            canConvert = true;
        } else {
            val = defval;
        }
        if (canConvert === true) {
            if (datatype !== null && datatype !== undefined) {
                switch (datatype) {
                    case 'int':
                        val = parseInt(val, 10);
                        break;
                    case 'float':
                        val = parseFloat(val);
                        break;
                    default:
                        break;
                }
            }
        }
    }
    return val;
};

/** Get color for value */
function getColor(val, pct, col, noGradient, custSec) {

    var no, inc, colors, percentage, rval, gval, bval, lower, upper, range, rangePct, pctLower, pctUpper, color;
    var noGradient = noGradient || custSec.length > 0;

    if (custSec.length > 0) {
        for (var i = 0; i < custSec.length; i++) {
            if (val > custSec[i].lo && val <= custSec[i].hi) {
                return custSec[i].color;
            }
        }
    }

    no = col.length;
    if (no === 1) return col[0];
    inc = (noGradient) ? (1 / no) : (1 / (no - 1));
    colors = [];
    for (i = 0; i < col.length; i++) {
        percentage = (noGradient) ? (inc * (i + 1)) : (inc * i);
        rval = parseInt((cutHex(col[i])).substring(0, 2), 16);
        gval = parseInt((cutHex(col[i])).substring(2, 4), 16);
        bval = parseInt((cutHex(col[i])).substring(4, 6), 16);
        colors[i] = {
            pct: percentage,
            color: {
                r: rval,
                g: gval,
                b: bval
            }
        };
    }

    if (pct === 0) {
        return 'rgb(' + [colors[0].color.r, colors[0].color.g, colors[0].color.b].join(',') + ')';
    }

    for (var j = 0; j < colors.length; j++) {
        if (pct <= colors[j].pct) {
            if (noGradient) {
                return 'rgb(' + [colors[j].color.r, colors[j].color.g, colors[j].color.b].join(',') + ')';
            } else {
                lower = colors[j - 1];
                upper = colors[j];
                range = upper.pct - lower.pct;
                rangePct = (pct - lower.pct) / range;
                pctLower = 1 - rangePct;
                pctUpper = rangePct;
                color = {
                    r: Math.floor(lower.color.r * pctLower + upper.color.r * pctUpper),
                    g: Math.floor(lower.color.g * pctLower + upper.color.g * pctUpper),
                    b: Math.floor(lower.color.b * pctLower + upper.color.b * pctUpper)
                };
                return 'rgb(' + [color.r, color.g, color.b].join(',') + ')';
            }
        }
    }

}

/** Fix Raphael display:none tspan dy attribute bug */
function setDy(elem, fontSize, txtYpos) {
    if ((!ie || ie > 9) && elem.node.firstChild.attributes.dy) {
        elem.node.firstChild.attributes.dy.value = 0;
    }
}

/** Random integer  */
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

/**  Cut hex  */
function cutHex(str) {
    return (str.charAt(0) == "#") ? str.substring(1, 7) : str;
}

/**  Human friendly number suffix - From: http://stackoverflow.com/questions/2692323/code-golf-friendly-number-abbreviator */
function humanFriendlyNumber(n, d) {
    var p, d2, i, s;

    p = Math.pow;
    d2 = p(10, d);
    i = 7;
    while (i) {
        s = p(10, i-- * 3);
        if (s <= n) {
            n = Math.round(n * d2 / s) / d2 + "KMGTPE" [i];
        }
    }
    return n;
}

/** Format numbers with commas - From: http://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript */
function formatNumber(x) {
    var parts = x.toString().split(".");
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    return parts.join(".");
}

/**  Get style  */
function getStyle(oElm, strCssRule) {
    var strValue = "";
    if (document.defaultView && document.defaultView.getComputedStyle) {
        strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
    } else if (oElm.currentStyle) {
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1) {
            return p1.toUpperCase();
        });
        strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
}

/**  Create Element NS Ready  */
function onCreateElementNsReady(func) {
    if (document.createElementNS !== undefined) {
        func();
    } else {
        setTimeout(function () {
            onCreateElementNsReady(func);
        }, 100);
    }
}

/**  Get IE version  */
// ----------------------------------------------------------
// A short snippet for detecting versions of IE in JavaScript
// without resorting to user-agent sniffing
// ----------------------------------------------------------
// If you're not in IE (or IE version is less than 5) then:
// ie === undefined
// If you're in IE (>=5) then you can determine which version:
// ie === 7; // IE7
// Thus, to detect IE:
// if (ie) {}
// And to detect the version:
// ie === 6 // IE6
// ie > 7 // IE8, IE9 ...
// ie < 9 // Anything less than IE9
// ----------------------------------------------------------
// UPDATE: Now using Live NodeList idea from @jdalton
var ie = (function () {

    var undef,
        v = 3,
        div = document.createElement('div'),
        all = div.getElementsByTagName('i');

    while (
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
            all[0]
        ) ;
    return v > 4 ? v : undef;
}());

// extend target object with second object
function extend(out) {
    out = out || {};

    for (var i = 1; i < arguments.length; i++) {
        if (!arguments[i])
            continue;

        for (var key in arguments[i]) {
            if (arguments[i].hasOwnProperty(key))
                out[key] = arguments[i][key];
        }
    }

    return out;
};
